<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 挂载封装目录标签复用组件 -->
        <DirectoryTagSearch
          :query="query"
          ref="directory"
          @directorysListFn="directorysListFn"
          @searchFormData="searchFormDataFn"
        ></DirectoryTagSearch>
        <!-- 数据显示条数 -->
        <el-alert type="info" :closable="false" class="alert" show-icon
          >数据一共有{{ total }}条</el-alert
        >
        <!-- table表格 -->
        <el-table
          :data="directorysList"
          style="width: 100%"
          :header-cell-style="{ background: '#f4f4f5' }"
        >
          <el-table-column type="index" label="序号" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
            width="130"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="tagName"
            label="标签名称"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建者"
            width="180"
            align="center"
          >
          </el-table-column>
          <!-- 创建日期使用过滤器+dayjs - 格式化文字 -->
          <el-table-column
            prop="addDate"
            label="创建日期"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | formatTime }}</span>
            </template>
          </el-table-column>
          <!-- 状态使用插槽进行映射 -->
          <el-table-column prop="state" label="状态" width="150" align="center">
            <template v-slot="scope">
              <span>{{ stateObj[scope.row.state] }}</span>
            </template>
          </el-table-column>
          <!-- 操作使用插槽 -->
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <el-button
                @click="DisableClick(scope.row)"
                v-text="scope.row.state ? '禁用' : '启用'"
                type="text"
                size="small"
              ></el-button>
              <!-- 因为需要boolean值 - 强制转换0和1 -->
              <el-button
                type="text"
                size="small"
                @click="editClick(scope.row)"
                :disabled="Boolean(scope.row.state)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="delClickFn(scope.row)"
                :disabled="Boolean(scope.row.state)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
          <el-pagination
            v-if='!this.$route.query.name || !this.$route.query.id'
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="query.pagesize"
            layout="prev, pager, next, sizes,jumper,total"
            :page-count="pages"
          >
          </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
// 引入dayjs 时间格式管理
import dayjs from 'dayjs'
// 引入目录列表
import { list as getdirectorysListAPI, changeState, remove } from '@/api/hmmm/tags.js'
// 引入目录标签 - 复用组件
import DirectoryTagSearch from '@/module-hmmm/components/DirectoryTagSearch.vue'
export default {
  async created () {
    getCompanys()
    getQuestion()
    // 调用 - 目录列表 - 获取列表数据
    this.directorysListFn(this.query)
  },
  watch: {
    $route (to, form) {
      console.log(to, form)
      if (to.path === '/subjects/tags') {
        this.directorysListFn(this.query)
        // 重置所有参数
        this.$refs.directory.addformData = {
          subjectID: '', // 所属学科
          directoryName: '' // 目录名称
        }
        this.$refs.directory.formDate = {
          subjectID: null,
          directoryName: '', // 目录名称
          state: null // 状态
        }
      }
    }
  },
  data () {
    return {
      directorysList: [], // 目录列表
      total: 0, // 列表数据总条数
      pages: 0, // 页码中间的 1 , 2 , 3
      // editFormDate: {}, // 编辑数据
      query: {
        page: 1, // 页码
        pagesize: 10 // 页条
        // subjectID: '', // 学科Id
        // directoryName: '', // 目录名称
        // state: '' // 状态
      },
      // 映射对应
      stateObj: {
        1: '已启用',
        0: '已禁用'
      }
    }
  },
  // 对后台返回的时间进行处理
  filters: {
    formatTime (time) {
      if (!time) return
      // 给 dayjs 方法传入需要格式化的时间
      // 给 format 传入时间格式
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  components: {
    // 复用组件 - 注册
    DirectoryTagSearch
  },
  methods: {
    // 目录列表 - 获取列表数据
    async directorysListFn (data) {
      const res = await getdirectorysListAPI(data)
      this.directorysList = res.data.items
      this.total = res.data.counts
      this.pages = res.data.pages
      console.log('标签列表', res.data)
    },
    // 子组件 - 搜索表单数据 - 自定义事件
    searchFormDataFn (data) {
      // 点击搜索 -> 合并参数 -> 重新获取数据 -> 渲染列表
      // this.query = { ...this.query, ...data }
      // 重新渲染列表
      this.directorysListFn(data)
    },
    // 操作 - 按键 - 禁用(启用)
    async DisableClick (data) {
      await changeState({
        id: data.id,
        state: Number(!data.state)
      }).then(async () => {
        // await this.directorysListFn(this.query)
        data.state = Number(!data.state)
        await this.$message.success('操作成功')
      })
    },
    // 分页 - 页条
    handleSizeChange (pagesize) {
      // 页条赋值 - 重新获取数据 - 渲染列表
      // 将页码设置为 1
      this.query.pagesize = pagesize
      this.query.page = 1
      this.pageSizeCommentsFn()
    },
    // 分页 - 页码
    handleCurrentChange (page) {
      // 页码赋值 - 重新获取数据 - 渲染列表
      this.query.page = page
      this.pageSizeCommentsFn()
    },
    // 页码 - 页条 公共部分
    pageSizeCommentsFn () {
      const data = {
        ...this.$refs.directory.formDate,
        ...this.query
      };
      (this.$refs.directory.formDate.directoryName || this.$refs.directory.formDate.state) ? this.directorysListFn(data) : this.directorysListFn(this.query)
    },
    // 操作 - 修改 - 按键
    editClick (data) {
      // 控制子组件变量将其改为true
      this.$refs.directory.dialogVisible = true
      // 控制编辑 和 新增
      this.$refs.directory.editShow = true
      if (this.$refs.directory.editShow) {
        // 拿取子组件的表单内容把daat赋值给它
        this.$refs.directory.addformData = {
          id: data.id,
          subjectID: data.subjectID,
          tagName: data.tagName
        }
      }
    },
    // 操作 - 删除 - 按键
    async delClickFn (data) {
      const confim = await this.$confirm('此操作将永久删除该, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confim === 'cancel') return this.$message('取消操作')
      await remove(data).then(() => this.$message.success('操作成功'))
      if (this.directorysList.length === 1) {
        this.query.page--
        if (this.query.page === 0) {
          this.query.page = 1
        }
      }
      await this.directorysListFn(this.query)
    }
  }
}
</script>

<style scoped>
.pagination {
  float: right;
  margin: 20px;
}
.alert {
  margin-bottom: 20px;
}
</style>
